<template>
  <div class="snapshotOrder">
    <h1>我的帮助</h1>
    <el-table :header-row-style="{height:'30px'}"
              :row-style="{height:'80px'}"
              :data="tableData"
              :highlight-current-row='true'>

      <el-table-column
          prop="date"
          sortable
          label="日期"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="title"
          label="订单标题"
          width="180">
      </el-table-column>
      <el-table-column
          label="受助用户"
          width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>联系电话: {{ scope.row.phone }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          prop="stateName"
          label="订单状态"
          width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10,20,30]"
          layout="sizes, prev, pager, next, total"
          :total="counts">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import {reqMyHelpOrderItems} from "@/api";

export default {
  name: "MySnapshotOrder",
  data(){
    return {
      params: {pageNo: 1, pageSize: 10},
      tableData: [],
      counts: 0
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log('row==='+row.helpUserId)
      this.$router.push({name:'receive',query: row})
    },
    handleSizeChange(val) {
      this.params.pageSize = val
    },
    handleCurrentChange(val) {
      this.params.pageNo = val
    }
  },
  async mounted() {
    await reqMyHelpOrderItems(this.params).then(( data ) => {
      this.tableData = data.items
      this.tableData.forEach((item)=>{
        switch (item.status) {
          case 0:
            item['stateName'] = "未接单"
            break;
          case 1:
            item['stateName'] = "待确认"
            break;
          case 2:
            item['stateName'] = "进行中"
            break;
          case 3:
            item['stateName'] = "求助用户取消了订单"
            break;
          case 4:
            item['stateName'] = "您取消了订单"
            break;
          case 5:
            if (item.evaluationStatus == 2 || item.evaluationStatus == 3){
              item['stateName'] = "已完成"
            }
            else {
              item['stateName'] = '待评价'
            }
            break;
          case 6:
            item['stateName'] = "帮助用户取消了订单"
            break;
          case 7:
            item['stateName'] = "求助用户取消了订单"
            break;
          default:
            item['stateName'] = "状态错误，请联系管理员"
            break;
        }
      })
      this.counts = data.counts
      console.log(data)
    });
  }

}
</script>

<style scoped>
.snapshotOrder{
  margin-top: 30px;
}
.el-table{
  margin-top: 20px;
  font-size: 14px;
  height: 750px;

}

.block{
  text-align: center;
}
</style>
